<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="robots" content="index, all" />
    <title>olcesium layergroup synchronization</title>
    <link rel="stylesheet" href="../node_modules/ol/ol.css" type="text/css">
    <style>
      #layertree li > span {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="map2d" style="width:600px;height:400px;float:left;"></div>
    <div id="map3d" style="width:600px;height:400px;float:left;position:relative;"></div>
    <div id="layertree" style="position:absolute;top:400px">
      <h5>Click on layer nodes below to change their properties.</h5>
      <ul>
        <li><span>OSM layer</span>
          <fieldset id="layer0">
            <label class="checkbox" for="visible0">
              <input id="visible0" class="visible" onchange="toggleLayer(this, 'layer0')" type="checkbox" checked/>
              visibility
            </label>
            <label>opacity</label>
            <input class="opacity" type="range" min="0" max="1" step="0.01" value="1"
                   onchange="setLayerOpacity(this, 'layer0');" oninput="setLayerOpacity(this, 'layer0');"/>
          </fieldset>
        </li>
        <li><span>Layer group</span>
          <fieldset id="layer1">
            <label class="checkbox" for="visible1">
              <input id="visible1" class="visible" onchange="toggleLayer(this, 'layer1')" type="checkbox" checked/>
              visibility
            </label>
            <label>opacity</label>
            <input class="opacity" type="range" min="0" max="1" step="0.01" value="1"
                   onchange="setLayerOpacity(this, 'layer1');" oninput="setLayerOpacity(this, 'layer1');"/>
          </fieldset>
          <ul>
            <li><span>Food insecurity layer</span>
              <fieldset id="layer10">
                <label class="checkbox" for="visible10">
                  <input id="visible10" class="visible" onchange="toggleLayer(this, 'layer10')" type="checkbox" checked/>
                  visibility
                </label>
                <label>opacity</label>
                <input class="opacity" type="range" min="0" max="1" step="0.01" value="1"
                       onchange="setLayerOpacity(this, 'layer10');" oninput="setLayerOpacity(this, 'layer10');"/>
              </fieldset>
            </li>
            <li><span>World borders layer</span>
              <fieldset id="layer11">
                <label class="checkbox" for="visible11">
                  <input id="visible11" class="visible" onchange="toggleLayer(this, 'layer11')" type="checkbox" checked/>
                  visibility
                </label>
                <label>opacity</label>
                <input class="opacity" type="range" min="0" max="1" step="0.01" value="1"
                       onchange="setLayerOpacity(this, 'layer11');" oninput="setLayerOpacity(this, 'layer11');"/>
              </fieldset>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <script src="inject_ol_cesium.js"></script>
  </body>
</html>
